<mat-card class="card" [ixUiSearch]="searchableElements.elements.topology">
  <mat-card-header>
    <h3 mat-card-title>
      <span>
        {{ 'VDEVs' | translate }}
      </span>

      <ix-icon
        name="help"
        class="pool-icon"
        [matTooltip]="'A pool is made of VDEVs (virtual devices). Each VDEV is a group of drives working together' | translate"
      ></ix-icon>

      <ix-pool-card-icon [type]="iconType()" [tooltip]="iconTooltip()"></ix-pool-card-icon>
    </h3>

    <button
      mat-button
      ixTest="manage-vdevs"
      [ixUiSearch]="searchableElements.elements.viewVdevs"
      (click)="router.navigate(['/storage', this.poolState().id, 'vdevs'])"
    >
      {{ 'View VDEVs' | translate }}
    </button>
  </mat-card-header>

  <mat-card-content>
    <div class="content-container">
      @if (topologyState.data !== notAssignedDev) {
        <div class="vdev-line">
          <b>{{ 'Data VDEVs' | translate }}</b>
          <div class="vdev-stats">
            @if (!!topologyWarningsState.data && !isPoolOffline()) {
              <span
                class="warning"
                [matTooltip]="topologyWarningsState.data"
              >
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
            }
            @if (isPoolOffline()) {
              <span class="warning">
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
              <span class="offline-data-vdevs">{{ 'Offline VDEVs' | translate }}</span>
            } @else {
              <span class="vdev-value">{{ topologyState.data }}</span>
            }
          </div>
        </div>
      }

      @if (topologyState.metadata !== notAssignedDev && !isPoolOffline()) {
        <div class="vdev-line">
          <b>{{ 'Metadata VDEVs' | translate }}</b>
          <div class="vdev-stats">
            @if (!!topologyWarningsState.metadata) {
              <span class="warning" [matTooltip]="topologyWarningsState.metadata">
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
            }
            <span class="vdev-value">{{ topologyState.metadata }}</span>
          </div>
        </div>
      }

      @if (topologyState.log !== notAssignedDev && !isPoolOffline()) {
        <div class="vdev-line">
          <b>{{ 'Log VDEVs' | translate }}</b>
          <div class="vdev-stats">
            @if (!!topologyWarningsState.log) {
              <span class="warning" [matTooltip]="topologyWarningsState.log">
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
            }
            <span class="vdev-value">{{ topologyState.log }}</span>
          </div>
        </div>
      }

      @if (topologyState.cache !== notAssignedDev && !isPoolOffline()) {
        <div class="vdev-line">
          <b>{{ 'Cache VDEVs' | translate }}</b>
          <div class="vdev-stats">
            @if (!!topologyWarningsState.cache) {
              <span class="warning" [matTooltip]="topologyWarningsState.cache">
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
            }
            <span class="vdev-value">{{ topologyState.cache }}</span>
          </div>
        </div>
      }

      @if (!isDraidLayoutDataVdevs && topologyState.spare !== notAssignedDev && !isPoolOffline()) {
        <div class="vdev-line">
          <b>{{ 'Spare VDEVs' | translate }}</b>
          <div class="vdev-stats">
            @if (!!topologyWarningsState.spare) {
              <span class="warning" [matTooltip]="topologyWarningsState.spare">
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
            }
            <span class="vdev-value">{{ topologyState.spare }}</span>
          </div>
        </div>
      }

      @if (topologyState.dedup !== notAssignedDev && !isPoolOffline()) {
        <div class="vdev-line">
          <b>{{ 'Dedup VDEVs' | translate }}</b>
          <div class="vdev-stats">
            @if (!!topologyWarningsState.dedup) {
              <span class="warning" [matTooltip]="topologyWarningsState.dedup">
                <ix-icon name="error" class="pool-icon icon-warning"></ix-icon>
              </span>
            }
            <span class="vdev-value">{{ topologyState.dedup }}</span>
          </div>
        </div>
      }

      @if (noOtherVdevTypes()) {
        <div class="vdev-line">
          <b>{{ 'No other VDEV types.' | translate }}</b>
        </div>
      }
    </div>
  </mat-card-content>
</mat-card>
